use crate::{components::copy::Copy, utils::get_ua::GetUa};
use dioxus::prelude::*;
#[derive(Debug, Clone, PartialEq)]
enum Platform {
    Windows,
    MacOS,
    Linux,
    Android,
    IOS,
}

impl Platform {
    fn all() -> Vec<Platform> {
        vec![
            Platform::Windows,
            Platform::MacOS,
            Platform::Linux,
            Platform::Android,
            Platform::IOS,
        ]
    }

    fn label(&self) -> &'static str {
        match self {
            Platform::Windows => "Windows",
            Platform::MacOS => "macOS",
            Platform::Linux => "Linux",
            Platform::Android => "Android",
            Platform::IOS => "iOS",
        }
    }
}

#[component]
pub fn UaGenerator() -> Element {
    let mut selected_platform = use_signal(|| Platform::Windows);
    let mut count = use_signal(|| 5);
    let mut ua_list = use_signal(Vec::<String>::new);
    let t = move || async move {
        let pt = match *selected_platform.read() {
            // "windows", "macs", "iphone", "ipad", "android"
            Platform::Windows => "windows",
            Platform::MacOS => "macs",
            Platform::IOS => "iphone",
            Platform::Android => "android",
            _ => "iphone",
        };

        match GetUa(count.read().to_string(), pt.to_string()).await {
            Ok(val) => {
                let data = val.data;
                ua_list.set(data);
            }
            Err(_) => {
                println!("请求失败！")
            }
        };
    };
    rsx! {
        div {
            class: "min-w-2xl max-w-3xl mx-auto p-6 bg-white shadow-md rounded-2xl space-y-6",

            h1 { class: "text-xl font-bold text-gray-800", "随机 User-Agent 生成器" }

            div {
                class: "space-y-2",

                label { class: "block text-sm font-medium text-gray-700", "选择平台：" }
                select {
                    class: "
                        w-full
                        px-4 py-2
                        text-sm text-gray-800
                        bg-white
                        border border-gray-300
                        rounded-lg
                        shadow-sm
                        transition-all
                        focus:outline-none
                        focus:ring-2 focus:ring-blue-500
                        focus:border-blue-500
                        hover:border-gray-400
                        cursor-pointer
                        appearance-none
                    ",
                    onchange: move |e| {
                        let val = e.value();
                        selected_platform.set(match val.as_str() {
                            "macOS" => Platform::MacOS,
                            "Linux" => Platform::Linux,
                            "Android" => Platform::Android,
                            "iOS" => Platform::IOS,
                            _ => Platform::Windows,
                        });
                    },
                    for platform in Platform::all() {
                        option {
                            value: "{platform.label()}",
                            selected: "{*selected_platform.read() == platform}",
                            class: "text-gray-800 bg-white",
                            "{platform.label()}"
                        }
                    }
                }
            }

            div {
                class: "space-y-2",  // 减少间距使布局更紧凑
                label {
                    class: "block text-sm font-medium text-gray-700 mb-1",  // 添加下边距
                    "生成数量："
                }
                div {  // 新增容器便于样式控制
                    class: "relative",  // 为可能添加的图标预留位置
                    input {
                        r#type: "number",
                        min: "1",
                        max: "100",
                        value: "{count}",
                        class: "
                            block w-full
                            px-3 py-2  // 调整内边距
                            text-sm text-gray-900  // 文字颜色
                            bg-white  // 背景色
                            border border-gray-300  // 边框
                            rounded-lg  // 更大的圆角
                            shadow-sm  // 轻微阴影
                            focus:outline-none  // 移除默认轮廓
                            focus:ring-2 focus:ring-blue-500  // 聚焦光环效果
                            focus:border-blue-500  // 聚焦边框色
                            hover:border-gray-400  // 悬停效果
                            transition-colors  // 颜色过渡动画
                            appearance-none  // 移除原生样式
                            [&::-webkit-inner-spin-button]:appearance-none  // 隐藏旋转按钮(Webkit)
                            [&::-webkit-outer-spin-button]:appearance-none  // 隐藏旋转按钮(Webkit)
                        ",
                        oninput: move |e| {
                            if let Ok(v) = e.value().parse::<usize>() {
                                count.set(v.min(100).max(1));
                            }
                        }
                    }
                }
            }

            button {
                class: "bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition w-full",
                onclick: move |_| async move {
                    let _ = t().await;


                },
                "生成 UA"
            }

            if !ua_list.read().is_empty() {
                div {
                    class: "space-y-2",
                    h2 { class: "text-sm font-medium text-gray-700", "生成结果：" }
                    div {
                        class:"flex justify-end w-full",
                        div {  }
                        Copy {
                            val:ua_list.read().join(";\n")
                        }
                    }
                    div {
                        class: "border rounded-md p-4 bg-gray-50 space-y-2 max-h-96 overflow-y-auto text-sm text-gray-800",


                        for ua in ua_list.read().iter() {
                            div { "{ua}" }
                        }
                    }
                }
            }
        }
    }
}
